<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">
        <!-- <h2>Segments renders</h2> -->

        <!---->
        <!-- <p> -->
        <!-- <pre> -->
        <!-- </pre> -->
        <!-- </p> -->
        <h4>通用属性</h4>
        <hr>
        <!---->
        <dl>
            <dt id="visible">显示</dt>
            <dd>
                <p>如果未设置，该元素将被隐藏，对于暂时隐藏元素非常有用。</p>
            </dd>
            <dt id="blendmode">混合模式</dt>
            <dd>
                <p>混合模式用于控制元素的显示效果。<br><br>
                    <value>Alpha</value> - 使用alpha混合方式<br>
                    <value>Screen</value> - 屏幕模式。乘以反色，结果总是较亮<br>
                    <value>Add</value> - 线性减淡（ADD）效果<br>
                    <value>PreMulAlpha</value> - 使用预乘alpha混合方式<br>
                    <value>AddAlpha</value> - 根据alpha通道的强度进行线性减淡（ADD）
                </p>
            </dd>
            <dt id="position">位置</dt>
            <dd>
                <p>指定元素的X、Y坐标位置。位置还受到<property query="measurepos">位置动画</property>、<property query="anchorx anchory">
                        锚点X/Y</property>和<property query="alignmentposition">位置对其方式</property>的影响。<br><br>X: <value>0.0
                    </value>，Y：
                    <value>0.0</value> 对应于左上角。<br>X: <value>0.5</value>，Y: <value>0.5</value>
                    对应于屏幕中央。<br>X: <value>1.0</value>，Y: <value>1.0</value> 对应于右下角。</p>
            </dd>
            <dt id="anchorx">锚点X轴</dt>
            <dd>
                <p>作为<property query="position">位置</property>属性的替代方案。允许在添加<property query="position">位置</property>
                    属性之前将元素设置为常见位置。<br>这在需要更复杂定位的情况下非常有用，例如创建进度条。<br><br>
                    <value>unset</value> - 使用默认值<br>
                    <value>start</value> - 左侧<br>
                    <value>center</value> - 居中<br>
                    <value>end</value> - 右侧
                </p>
            </dd>
            <dt id="anchory">锚点Y轴</dt>
            <dd>
                <p>作为<property query="position">位置</property>属性的替代方案。允许在添加<property query="position">位置</property>
                    值之前将元素设置为常见位置。<br>这在需要更复杂定位的情况下非常有用，例如创建进度条。<br><br>
                    <value>unset</value> - 使用默认值<br>
                    <value>start</value> - 顶部<br>
                    <value>center</value> - 居中<br>
                    <value>end</value> - 底部
                </p>
            </dd>
            <dt id="measurepos">位置动画</dt>
            <dd>
                <p>
                    为<property query="position">位置</property>属性的附加变化。
                </p>
            </dd>
            <dt id="alignmentposition">位置对齐方式</dt>
            <dd>
                <p>指定此元素的哪个点由<property query="position">位置</property>
                    或相关的位置属性进行定位。<br><br>例如，要将元素定位在屏幕中央，您会将此属性设置为X：<value>0.5</value>，Y：<value>0.5</value>，并且将<property
                        query="position">位置</property>也设置为X：<value>0.5</value>，Y：<value>0.5</value>
                    ，这样该元素的中心就与屏幕中心对齐。</p>
            </dd>
            <dt id="scaleisuniform">保持纵横比</dt>
            <dd>
                <p>如果设置，元素将始终保持其纵横比。
                    </br>禁用此选项以使元素填充屏幕 (用于背景等)。</p>
            </dd>
            <dt id="scale">缩放</dt>
            <dd>
                <p>指定元素的尺寸。</p>
            </dd>
            <dt id="measurescale">缩放动画</dt>
            <dd>
                <p>
                    为<property query="scale">Scale</property>属性附加变化。
                </p>
            </dd>
            <h5>额外的通用属性</h5>
            <hr>

            <dt id="rotation">旋转</dt>
            <dd>
                <p>元素的旋转角度。</p>
            </dd>
            <dt id="measurerot">旋转动画</dt>
            <dd>
                <p>为<property query="rotation">旋转</property>属性附加变化。</p>
            </dd>
        </dl>
        <!---->
    </div>


    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>

</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
<script src="jumps.js"></script>
</html>